<template>
  <div class="h">
    <div>
      <h2 class="title">
        <span>豆瓣电影Top250榜</span>
        <el-checkbox v-model="isShowNotSee">只显示我自己未看过的({{ total }})</el-checkbox>
      </h2>
      <div>
        <section class="sec__filter">
          <el-card class="">
            <div class="sec__filter__box">
              <ul class="select">
                <li class="select-list">
                  <dl>
                    <dt>国家/地区</dt>
                    <div class="ddBox">
                      <dd @click="handleClick('region', '', '')" class="select-all" :class="searchForm.region == '' ? 'selected' : ''"><span>全部</span></dd>
                      <dd @click="handleClick('region', item, item)" v-for="(item, i) in listRegion" :key="i" :class="searchForm.region == item ? 'selected' : ''">
                        <span>{{ item }}</span>
                      </dd>
                    </div>
                  </dl>
                </li>
                <li class="select-list">
                  <dl>
                    <dt>导演</dt>
                    <div class="ddBox" :class="{ showMore: isShowMoreDirector }">
                      <dd @click="handleClick('director', '', '')" class="select-all" :class="searchForm.director == '' ? 'selected' : ''"><span>全部</span></dd>
                      <dd @click="handleClick('director', item, item)" v-for="(item, i) in listDirector" :key="i" :class="searchForm.director == item ? 'selected' : ''">
                        <span>{{ item }}</span>
                      </dd>
                      <div class="showMoreBtn" v-if="listDirector.length > 20">
                        <img src="@/assets/imgs/toggle.svg" class="img hand" :class="{ active: isShowMoreDirector }" @click="isShowMoreDirector = !isShowMoreDirector" />
                      </div>
                    </div>
                  </dl>
                </li>
                <li class="select-list">
                  <dl>
                    <dt>主演</dt>
                    <div class="ddBox" :class="{ showMore: isShowMoreLeadingRole }">
                      <dd @click="handleClick('leadingRole', '', '')" class="select-all" :class="searchForm.leadingRole == '' ? 'selected' : ''"><span>全部</span></dd>
                      <dd @click="handleClick('leadingRole', item, item)" v-for="(item, i) in listLeadingRole" :key="i" :class="searchForm.leadingRole == item ? 'selected' : ''">
                        <span>{{ item }}</span>
                      </dd>
                      <div class="showMoreBtn" v-if="listLeadingRole.length > 20">
                        <img src="@/assets/imgs/toggle.svg" class="img hand" :class="{ active: isShowMoreLeadingRole }" @click="isShowMoreLeadingRole = !isShowMoreLeadingRole" />
                      </div>
                    </div>
                  </dl>
                </li>
                <li class="select-list">
                  <dl>
                    <dt>类别</dt>
                    <div class="ddBox">
                      <dd @click="handleClick('category', '', '')" class="select-all" :class="searchForm.category == '' ? 'selected' : ''"><span>全部</span></dd>
                      <dd @click="handleClick('category', item, item)" v-for="(item, i) in listCategory" :key="i" :class="searchForm.category == item ? 'selected' : ''">
                        <span>{{ item }}</span>
                      </dd>
                    </div>
                  </dl>
                </li>
                <li class="select-list">
                  <dl>
                    <dt>年份</dt>
                    <div class="ddBox">
                      <dd @click="handleClick('year', '', '')" class="select-all" :class="searchForm.year == '' ? 'selected' : ''"><span>全部</span></dd>
                      <dd @click="handleClick('year', item, item)" v-for="(item, i) in listYear" :key="i" :class="searchForm.year == item ? 'selected' : ''">
                        <span>{{ item }}</span>
                      </dd>
                    </div>
                  </dl>
                </li>
                <li class="select-list">
                  <dl>
                    <dt>评分</dt>
                    <div class="ddBox">
                      <dd @click="handleClick('score', '', '')" class="select-all" :class="searchForm.score == '' ? 'selected' : ''"><span>全部</span></dd>
                      <dd @click="handleClick('score', item.value, item.title)" v-for="(item, i) in listScore" :key="i" :class="searchForm.score == item.value ? 'selected' : ''">
                        <span>{{ item.title }}</span>
                      </dd>
                    </div>
                  </dl>
                </li>
                <li class="select-result">
                  <dl>
                    <dt>已选条件</dt>
                    <template
                      v-if="
                        searchForm.region.length > 0 ||
                        String(searchForm.score).length > 0 ||
                        searchForm.director.length > 0 ||
                        searchForm.leadingRole.length > 0 ||
                        searchForm.category.length > 0 ||
                        searchForm.region.length > 0 ||
                        searchForm.year.length > 0
                      ">
                      <!-- 国别地区 -->
                      <dd v-if="searchForm.region.length > 0" style="cursor: default">
                        <span>{{ searchForm.region }}</span> <b @click="handleRemove('region')" style="cursor: pointer">×</b>
                      </dd>
                      <!-- 导演 -->
                      <dd v-if="searchForm.director.length > 0" style="cursor: default">
                        <span>{{ searchForm.director }}</span> <b @click="handleRemove('director')" style="cursor: pointer">×</b>
                      </dd>
                      <!-- 主演 -->
                      <dd v-if="searchForm.leadingRole.length > 0" style="cursor: default">
                        <span>{{ searchForm.leadingRole }}</span> <b @click="handleRemove('leadingRole')" style="cursor: pointer">×</b>
                      </dd>
                      <!-- 类别 -->
                      <dd v-if="searchForm.category.length > 0" style="cursor: default">
                        <span>{{ searchForm.category }}</span> <b @click="handleRemove('category')" style="cursor: pointer">×</b>
                      </dd>
                      <!-- 年份 -->
                      <dd v-if="searchForm.year.length > 0" style="cursor: default">
                        <span>{{ searchForm.year }}</span> <b @click="handleRemove('year')" style="cursor: pointer">×</b>
                      </dd>
                      <!-- 评分 -->
                      <dd v-if="String(searchForm.score).length > 0" style="cursor: default">
                        <span>{{ searchForm.scoreTitle }}</span> <b @click="handleRemove('score')" style="cursor: pointer">×</b>
                      </dd>
                    </template>
                    <dd class="select-no" v-else>暂时没有选择过滤条件</dd>
                  </dl>
                  <dl>
                    <dt>符合条件</dt>
                    <template>
                      <dd style="cursor: default">
                        <span>{{ total }}</span> 条
                      </dd>
                    </template>
                  </dl>
                </li>
              </ul>
            </div>
          </el-card>
        </section>
        <ul class="list" v-if="listFilter && listFilter.length > 0">
          <li class="list_i" v-for="(item, idx) in listFilter" :key="idx">
            <el-card>
              <div slot="header">
                <el-tag size="mini">{{ item.rink }}</el-tag>
                <a :href="item.link" target="_blank">
                  <span class="name">{{ item.name }}</span>
                </a>
              </div>
              <div class="box">
                <div class="box_l">
                  <a :href="item.link" target="_blank" class="a">
                    图片暂时 <br />
                    无法显示
                    <!-- <img :src="src(item.src)" alt="" class="img" /> -->
                  </a>
                </div>
                <div class="box_r">
                  <p class="p">导演:{{ item.director }}</p>
                  <p class="p">主演:{{ item.leadingRole }}</p>
                  <p class="p">年份: {{ item.year }}</p>
                  <p class="p">类别: {{ item.category }}</p>
                  <p class="p">国家/地区: {{ item.region }}</p>
                  <div class="rate p">
                    <el-rate v-model="item.scoreValue" disabled text-color="#ff9900"></el-rate><span class="txt">{{ item.score }}</span>
                  </div>
                </div>
              </div>
            </el-card>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import dataJson from "@/libs/movie/dataJson231113.json";
import listScore from "@/libs/movie/listScore.json";
import seen from "@/libs/movie/seen.js";
import config from "@/libs/movie/config.js";
import imgs from "@/libs/movie/imgs.js";
export default {
  props: {},
  data() {
    return {
      listDirector: [],
      listLeadingRole: [],
      listCategory: [],
      listYear: [],
      listRegion: [],
      listScore: listScore,
      imgs: imgs,
      searchForm: {
        region: "",
        director: "",
        leadingRole: "",
        category: "",
        year: "",
        score: "",
        scoreTitle: "",
      },
      isShowMoreDirector: false,
      isShowMoreLeadingRole: false,
      isShowNotSee: false, // 只显示未看过的
    };
  },
  computed: {
    src() {
      return (src) => {
        return this.imgs[src];
      };
    },
    list() {
      // 只显示未看过的内容
      let list;
      if (this.isShowNotSee) {
        list = dataJson.filter((ele) => {
          return !seen[ele["src"]];
        });
      } else {
        list = dataJson;
      }

      return list.map((item) => {
        const [director, leadingRole] = item["director"] && item["director"].split("主演:");
        const yearCategoryList = item["yearCategory"] && item["yearCategory"].split("/");
        let [year, region, category] = yearCategoryList;
        let year2 = "";
        let year3 = "";
        // 有些分类分了2个年份，需要特殊处理
        if (yearCategoryList.length === 4) {
          [year, year2, region, category] = yearCategoryList;
        }
        // "rink": "54", 特殊处理
        if (item["rink"] === "54") {
          [year, year2, , year3, region, category] = yearCategoryList;
        }
        return {
          ...item,
          region,
          director: director.replace("导演:", ""),
          leadingRole,
          category: category && category.trim(),
          year: year.trim().replace(/\D/g, ""),
          scoreValue: Number(item.score / 2),
        };
      });
    },
    total() {
      return (this.listFilter && this.listFilter.length) || 0;
    },
    listFilter() {
      let list = this.listFilterScore(this.searchForm.score);
      list = this.listFilterRegion(list, this.searchForm.region);
      list = this.listFilterDirector(list, this.searchForm.director);
      list = this.listFilterLeadingRole(list, this.searchForm.leadingRole);
      list = this.listFilterCategory(list, this.searchForm.category);
      list = this.listFilterYear(list, this.searchForm.year);
      return list && list.length > 0 ? list : [];
    },
    // 依据地区进行筛选
    listFilterRegion() {
      return (list, value) => {
        if (list && list.length > 0) {
          return list.filter((item) => {
            const ele = item["region"];
            if (ele) {
              return ele.indexOf(value) > -1;
            } else {
              return item;
            }
          });
        }
      };
    },
    // 依据导演进行筛选
    listFilterDirector() {
      return (list, value) => {
        if (list && list.length > 0) {
          return list.filter((item) => {
            const ele = item["director"];
            if (ele) {
              return ele.indexOf(value) > -1;
            } else {
              return item;
            }
          });
        }
      };
    },
    // 依据主演进行筛选
    listFilterLeadingRole() {
      return (list, value) => {
        if (list && list.length > 0) {
          return list.filter((item) => {
            const ele = item["leadingRole"];
            if (ele) {
              return ele.indexOf(value) > -1;
            } else {
              return item;
            }
          });
        }
      };
    },
    // 依据类别进行筛选
    listFilterCategory() {
      return (list, value) => {
        if (list && list.length > 0) {
          return list.filter((item) => {
            const ele = item["category"];
            if (ele) {
              return ele.indexOf(value) > -1;
            } else {
              return item;
            }
          });
        }
      };
    },
    // 依据年份进行筛选
    listFilterYear() {
      return (list, value) => {
        if (list && list.length > 0) {
          return list.filter((item) => {
            const ele = item["year"];
            if (ele) {
              return ele.indexOf(value) > -1;
            } else {
              return item;
            }
          });
        }
      };
    },
    // 依据评分进行筛选
    listFilterScore() {
      return (value) => {
        return this.list.filter((item) => {
          if (value.indexOf("~") > -1) {
            let [min, max] = value.split("~");
            return item.score >= min && item.score <= max;
          } else {
            return item.score > Number(value);
          }
        });
      };
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    initConfig() {
      this.isShowNotSee = config["isShowNotSee"];
      this.searchForm.region = config["searchForm"]["region"];
    },
    init() {
      this.initConfig();
      this.getDataSearchList();
    },
    /**
     *  动态活期查询条件列表
     *  年份列表
     *  导演列表
     *  主演列表
     *  类别列表
     */
    getDataSearchList() {
      let listYear = [];
      let listRegion = [];
      let listCategory = [];
      let listDirector = [];
      let listLeadingRole = [];
      let list = [];
      if (this.listFilter && this.listFilter.length > 0) {
        list = this.listFilter;
      } else {
        list = this.list;
      }
      list.forEach((ele, idx) => {
        if (!ele) return [];
        // 年份列表
        // 去除非数字
        listYear.push(ele["year"] && ele["year"]);

        // 区域列表
        // 去除括号
        let region = ele["region"] && ele["region"].replace("(", "").replace(")", "").trim();
        listRegion.push(...(region ? region.split(" ") : []));

        // 类别列表
        let category = ele["category"] ? ele["category"].split(" ") : [];
        listCategory.push(...category);

        // 导演列表
        let director = ele["director"]
          ? ele["director"]
              .trim()
              .replace(/[主...]/g, "")
              .replace("/", "")
              // .replace(/[^\u4e00-\u9fa5]/g, "")
              .split(" ")
          : [];
        listDirector.push(...director);
        // 主演列表
        let leadingRole = ele["leadingRole"]
          ? ele["leadingRole"]
              .trim()
              .replace(/[\.]/g, "")
              // .replace(/[^\u4e00-\u9fa5]/g, "")
              .split("/")
          : [];
        if (leadingRole) {
          listLeadingRole.push(...leadingRole);
        }
        // console.log(2,leadingRole)
      });
      //对年份进行去重、正序排序
      this.listYear = this.delRepeat(listYear).sort((a, b) => a * 1 - b * 1);
      //对地区进行去重
      this.listRegion = this.delRepeat(listRegion);
      //对类别进行去重
      this.listCategory = this.delRepeat(listCategory);
      //对导演进行去重
      this.listDirector = this.delRepeat(listDirector);
      //对主演进行去重
      this.listLeadingRole = this.delRepeat(listLeadingRole);
    },
    // 去除重复项
    delRepeat(list) {
      if (!list) return [];
      let newData = [];
      list.forEach((item) => {
        if (newData.indexOf(item) < 0 && item != "") {
          newData.push(item);
        }
      });
      return newData;
    },
    //移除条目
    handleRemove(field) {
      this.searchForm[field] = "";
      this.handleSearch();
    },
    //点选条目
    handleClick(field, val, title) {
      if (this.searchForm[field] == val) {
        //如果选中状态 则移除
        this.handleRemove(field);
        return;
      }
      this.searchForm[field] = val;
      this.searchForm[`${field}Title`] = title;
      this.handleSearch();
    },
    //搜索事件
    handleSearch() {
      console.log(this.searchForm);
      this.getDataSearchList();
    },
  },
};
</script>

<style lang="scss" scoped>
.mt0 {
  margin-top: 0;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list {
  display: grid;
  margin-top: 20px;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  &_i {
    width: 100%;
    .name {
      margin-left: 10px;
    }
    .rate {
      color: #ff9900;
      display: flex;
      align-items: center;
      margin-top: 20px;
      .txt {
        margin-left: 10px;
      }
    }
    .box {
      display: flex;

      &_l {
        width: 120px;
        flex-shrink: 0;
        .img {
          width: 100%;
        }
        .a {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;
          border: 1px solid #f1f3f5;
          border-radius: 5px;
          &:hover {
            background: #f1f3f5;
          }
        }
      }
      &_r {
        padding-left: 20px;
        .p {
          margin: 0 0 10px 0;
        }
      }
    }
  }
}
.sec__filter {
  background-color: #eff1f883;
  margin-top: 20px;

  &__box {
    font-size: 16px;
    color: #333;
    padding: 20px 0;

    .select {
      li {
        list-style: none;
        padding: 10px 0 5px 30px;
      }

      .select-list {
        border-bottom: 1px solid #fff;
      }

      dl {
        font-weight: normal;
        display: flex;
        margin: 0;

        &:after {
          content: "";
          display: block;
          clear: both;
          height: 0;
          overflow: hidden;
        }

        dt {
          width: 100px;
          top: 0;
          text-align: right;
          color: #6dadf2ff;
          font-weight: normal;
          font-weight: bold;
          flex-shrink: 0;
          &::after {
            content: ":";
          }
        }
        .ddBox {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          max-height: 5em;
          overflow: hidden;
          position: relative;
          padding-bottom: 1em;
          &.showMore {
            max-height: unset;
          }
          .showMoreBtn {
            position: absolute;
            bottom: 0px;
            padding-bottom: 6px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            background-color: #fff;
            .img {
              width: 20px;
              animation: upDown 2s ease-in-out infinite;
              position: relative;
              &.active {
                transform: rotateX(180deg);
              }
            }
          }
        }
        dd {
          font-weight: normal;
          display: flex;
          align-items: center;
          margin-left: 10px;
          margin-bottom: 10px;

          &.select-all {
          }

          > span {
            display: inline-block;
            white-space: nowrap;
            padding: 2px 10px;
            text-decoration: none;
            border-radius: 4px;
            color: #333;
            font-weight: normal;
            cursor: pointer;

            &:hover {
              background-color: #6dadf233;
            }
          }
        }

        .selected span {
          background-color: #6dadf2ff;
          color: #fff;
        }
      }

      .select-result {
        dl {
          padding: 10px 0 5px 30px;
        }
        dd {
          &.select-no {
            color: #999;
          }

          &.selected {
            margin-right: 20px;

            span {
              position: relative;
              &:after {
                content: "X";
                text-align: center;
                border: 1px solid #fff;
                border-radius: 50%;
                display: inline-block;
                width: 16px;
                height: 16px;
                line-height: 16px;
                position: absolute;
                top: -10px;
                right: -10px;
              }

              &:hover:after {
                background-color: #fff;
                color: #999;
              }
            }
          }
        }
      }
    }
  }
}
@keyframes upDown {
  0%,
  100% {
    top: 0;
  }
  50% {
    top: 6px;
  }
}
</style>
